import { PageHeader, Row, Col, List } from 'antd';
import axios from 'axios';
import React, { useEffect, useState } from 'react';
import _ from 'lodash'

export default function Visitor() {
  const [dataSource, setDataSource] = useState([]);
  useEffect(()=>{
    axios(`/news?_expand=category&publishState=2`).then(res => {
      console.log(Object.entries(_.groupBy(res.data, item => item.category.title)));
      setDataSource(Object.entries(_.groupBy(res.data, item => item.category.title)));
    })
  },[])
  return (
    <div>
      <PageHeader
        className="site-page-header"
        onBack={() => {
          window.history.back();
        }}
        title="全球大新闻"
        subTitle="游客访问"
        style={{marginBottom:'2rem'}}
      />
      <Row gutter={[0, 50]}>
        {
        dataSource.map(item => 
          <Col
            xs={{
              span: 6,
              offset: 1,
            }}
            key = {item[0]}
          >
            <List
              size="small"
              header={<h2 style={{fontWeight:'bold'}}>{item[0]}</h2>}
              bordered
              dataSource={item[1]}
              renderItem={(data) => <List.Item><a href={`/detail/${data.id}`}>{data.title}</a></List.Item>}
            />
          </Col>)
        }
      </Row>
    </div>
  )
}
